<template>
	<uv-modal ref="modalRef" :title="undefined" :closeOnClickOverlay="false">
		<view class="close-icon-wrap" @click="close">
			<uv-icon name="close" color="#C3C3C3" size="24rpx"></uv-icon>
		</view>

		<view class="popup-body">
			<view class="fs-34 fw-700 text-center">确认发货</view>

			<view class="list-container fs-30 ">
				<view class=" flex--center">
					<view>客户名称</view>
					<view class="flex-1 flex-end" style="color: #ff4c2a;">
						{{userinfo.deliveryPerson}}
					</view>
				</view>
				<view class=" flex--center">
					<view>订单编号</view>
					<view class="flex-1 flex-end" style="color: #ff4c2a;">
						{{userinfo.orderNumber}}
					</view>
				</view>
				<view class="flex--center">
					<view>创建时间</view>
					<view class="flex-1 flex-end" style="color: #ff4c2a;">
						{{userinfo.createTime}}
					</view>
				</view>

				<view class="list-item flex--center fw-700">
					<view>发货方式</view>
					<view class="flex-1 flex-end">
						<view class="flex--center" @click="deliveryMode = 2">
							<image class="radio-icon" src="/static/radio.png" v-if="deliveryMode == 1"></image>
							<image class="radio-icon" src="/static/radio-checked.png" v-else></image>
							<view>自提</view>
						</view>
						<view class="flex--center" @click="deliveryMode = 1">
							<image class="radio-icon" src="/static/radio-checked.png" v-if="deliveryMode == 1"></image>
							<image class="radio-icon" src="/static/radio.png" v-else></image>
							<view>物流</view>
						</view>
					</view>
				</view>
				<view class="" v-if="deliveryMode == 1">
					<view class="list-item flex--center fw-700">
						<view>发货单号</view>
						<view class="flex-1 flex-end">
							<uv-input border="none" placeholder="扫码识别或手动输入单号" placeholderStyle="#D7D7D7"
								fontSize="30rpx" inputAlign="right" v-model="deliveryNumber"></uv-input>
							<image class="scan-icon" src="/static/scan-red.png" @click="scan"></image>
						</view>
					</view>

					<view class="list-item flex--center fw-700">
						<view>快递公司</view>
						<view class="flex-1 flex-end" @click="openPicker">
							<!-- <uv-input border="none" placeholder="请输入快递公司" placeholderStyle="#D7D7D7" fontSize="30rpx"
								inputAlign="right" v-model="sn"></uv-input> -->
							<text>{{deliveryName||'请选择'}}</text>
							<uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="popup-footer" slot="confirmButton">
			<button class="confirm-button uv-reset-button flex-center-center" @click="handleSubmit">确认提交</button>
		</view>
		<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
	</uv-modal>
</template>

<script>
	export default {
		name: 'ConfirmPopup',
		props: ['orderId'],
		data() {

			return {
				deliveryNumber: '',
				deliveryMode: 1,
				list: [],
				deliveryName: "",
				deliveryCode: "",
				columns: [
					[]
				],
				userinfo: {}

			}
		},
		mounted() {
			console.log(this.orderId, 'orderId')
			this.getlist()
			this.getOrderData()
			this.$nextTick(() => {
				this.$refs.modalRef.open()
			})
		},
		methods: {
			async getOrderData() {
				const result = await this.$api.getOrderData({
					id: this.orderId
				})
				if (result) {
					this.userinfo = result.data
				}

			},
			close() {
				this.$refs.picker.close();
				this.$emit('childEventbClose', '');
			},
			scan() {
				console.log('handleScan')
				uni.scanCode({
					scanType: ['barCode'],
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if (res.scanType == 'CODE_128') {
							this.deliveryNumber = res.result
						} else {
							uni.showToast({
								title: '识别失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				});
			},
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log('confirm', e, e.indexs[0]);
				this.deliveryName = e.value[0]
				let index = e.indexs[0]
				this.deliveryCode = this.list[index].deliveryCode
			},
			async getlist() {
				const result = await this.$api.getDeliveryList({
					pageNum: 1,
					pageSize: 1000
				})
				if (result) {
					console.log(result, 3333)
					this.list = result.rows
					this.columns[0] = this.list.map(item => item.deliveryName)
				}
			},
			handleSubmit() {
				if (!this.deliveryName && this.deliveryMode == 1) {
					uni.showToast({
						title: '请选择快递公司',
						icon: 'none'
					})
					return
				}
				if (!this.deliveryNumber && this.deliveryMode == 1) {
					uni.showToast({
						title: '请填写快递单号',
						icon: 'none'
					})
					return
				}
				let params = {}
				if (this.deliveryMode == 2) {
					params = {
						id: this.orderId,
						deliveryMode: this.deliveryMode,
					}
				} else {
					params = {
						id: this.orderId,
						deliveryMode: this.deliveryMode,
						deliveryName: this.deliveryName,
						deliveryCode: this.deliveryCode,
						deliveryNumber: this.deliveryNumber
					}
				}
				console.log(params);
				this.$api.deliveryOrder(params).then(res=>{
					uni.showToast({
						title: '发货成功',
						icon: 'none'
					})
					this.$refs.modalRef.close()
					this.$emit('childEventb', this.orderId);
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.close-icon-wrap {
		position: absolute;
		top: 0;
		right: 0;
		padding: 36rpx;
	}

	.popup-body {
		color: #0e0e0e;
		width: 600rpx;
		margin-left: -25rpx;
		margin-right: -25rpx;
	}

	.list-container {
		margin-top: 60rpx;
	}

	.list-item {
		border-bottom: 2rpx solid #eee;
		height: 120rpx;
	}

	.radio-icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 14rpx;
		margin-left: 67rpx;
	}

	.scan-icon {
		width: 45rpx;
		height: 45rpx;
		margin-left: 10rpx;
	}

	.popup-footer {
		padding-bottom: 46rpx;
	}

	.confirm-button {
		width: 574rpx;
		height: 76rpx;
		background: #ff4c2a;
		border-radius: 10rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}
</style>